<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.addEventListener(
        "click",
        function (e) {
          console.log(e);
          let span = document.createElement("span");
          span.innerText = "❤";
          span.style.opacity = 1;
          span.style.position = "absolute";
          span.style.zIndex = 9999;
          let fontSize = 20;
          span.style.fontSize = fontSize + "px";

          span.style.color = `rgb(${Math.random() * 255},${
            Math.random() * 255
          },${Math.random() * 255})`;

          let x = e.clientX;
          let y = e.clientY;
          span.style.left = x - fontSize / 2 + "px";
          span.style.top = y - fontSize / 2 + "px";

          document.body.appendChild(span);

          let interval = setInterval(function () {
            span.style.top = span.offsetTop - 1 + "px";
            span.style.opacity -= 0.05;

            if (span.style.opacity < 0) {
              clearInterval(interval);
              document.body.removeChild(span);
            }
          }, 10);

          //   setTimeout(function () {
          //     document.body.removeChild(span);
          //   }, 3000);
        },
        false
      );
    </script>
  </body>
</html>
